{{#if this.length}}
  <h2>External Feeds</h2>
{{/if}}
<ul class="right-side-list">
  {{#each this}}
    <li class="external_feed">
      <a class="close" data-delete-feed-id="{{id}}" href="#" role="button" aria-label="{{#t "remove_feed"}}Remove {{display_name}}{{/t}}">×</a>
      <a href="{{url}}">
        <b>
          {{display_name}}
        </b>
        {{#if header_match}}
          <em>{{#t "keyword"}}Keyword:{{/t}} {{header_match}}</em>
        {{/if}}
        {{#if external_feed_entries_count}}
          <em>{{external_feed_entries_count}} {{#t "posts_added"}}Posts Added{{/t}}</em>
        {{/if}}
      </a>
    </li>
  {{/each}}
  <li>
    <a href="#" class="element_toggler add_external_feed_link" aria-expanded='false' role="button" aria-controls="add_external_feed_form">
      {{> icons/rss-add}}
      {{#t "links.add_external_feed"}}Add External Feed{{/t}}
    </a>
  </li>
</ul>

<form class="bootstrap-form" id="add_external_feed_form" style="display: none">
  <h2>{{#t "add_a_new_feed"}}Add a New Feed{{/t}}</h2>

  <label for="external_feed_url">
    {{#t "descriptions.add_new_feed"}}
    You can automatically add posts from an RSS or Atom feed as announcements for this course.
    Just paste the feed URL below and any new entries will be added.
    {{/t}}
  </label>
  <input type="text"
         id="external_feed_url"
         name="url"
         class="input-block-level"
         aria-label="{{#t "feed_url_label"}}Feed URL{{/t}}"
         placeholder="{{#t "feed_url_label"}}Feed URL{{/t}}">
  <div>
    <select id="external_feed_verbosity" name="verbosity" class="input-block-level" aria-label="{{#t "options.content_to_post"}}Content to post{{/t}}">
      <option>--{{#t "options.content_to_post"}}Content to post{{/t}}--</option>
      <option value="full">{{#t "options.full_article"}}Full article{{/t}}</option>
      <option value="truncate">{{#t "options.truncated"}}Truncated{{/t}}</option>
      <option value="link_only">{{#t "options.link_only"}}Link only{{/t}}</option>
    </select>
  </div>
  <label class="checkbox">
    <input id="external_feed_enable_header_match"
           class="element_toggler"
           aria-controls="header_match_container"
           type="checkbox"> {{#t "labels.match_phrase_checkbox"}}Only add posts with a specific phrase in the title{{/t}}
  </label>
  <div id="header_match_container" style="display:none">
    <input id="external_feed_header_match"
           type="text"
           name="header_match"
           class="input-block-level"
           aria-label="{{#t "phrase_to_look_for"}}Phrase to look for{{/t}}"
           placeholder="{{#t "phrase_to_look_for"}}Phrase to look for{{/t}}">
  </div>
  <div>
    <button type="submit"
            data-text-while-loading="{{#t "buttons.adding_feed"}}Adding feed...{{/t}}"
            class="btn">{{#t "buttons.add_feed"}}Add Feed{{/t}}</button>
  </div>
</form>
